<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Expanding list web component</title>
    <style>
      ul {
        list-style-type: none;
      }

      li::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-right: 0.25rem;
        content: "";
      }

      .open::before,
      .closed::before {
        background-size: 1rem 1rem;
        position: relative;
        top: 0.25rem;
        opacity: 0.3;
      }

      .open::before {
        background-image: url(img/down.png);
      }

      .closed::before {
        background-image: url(img/right.png);
      }

      .closed .closed::before,
      .closed .open::before {
        display: none;
      }
    </style>
    <script src="main.js" defer></script>
  </head>
  <body>
    <h1>Expanding list web component</h1>
    <ul is="expanding-list">
      <li>
        UK
        <ul>
          <li>
            Yorkshire
            <ul>
              <li>
                Leeds
                <ul>
                  <li>Train station</li>
                  <li>Town hall</li>
                  <li>Headrow</li>
                </ul>
              </li>
              <li>Bradford</li>
              <li>Hull</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        USA
        <ul>
          <li>
            California
            <ul>
              <li>Los Angeles</li>
              <li>San Francisco</li>
              <li>Berkeley</li>
            </ul>
          </li>
          <li>Nevada</li>
          <li>Oregon</li>
        </ul>
      </li>
    </ul>

    <ul>
      <li>Not</li>
      <li>an</li>
      <li>expanding</li>
      <li>list</li>
    </ul>
  </body>
</html>
